SVG #4 stroke-dasharray

1 Using this striaght line to demonstrate

<line x1="0" y1="0" x2="50" y2="0" stroke="black" />

2 When stroke-dasharray has one single number

stroke-dasharray="10"

The dash and gap are both of length 10.

3 When stroke-dasharray has two numbers

stroke-dasharray="10 5"

The dashes are of length 10.

The gaps are of length 5.

4 When stroke-dasharray has four numbers

stroke-dasharray="10 5 8 3"

- dash 10,

- gap 5,

- second dash 8,

- second gap 3,

and this is the cycle.

5 What if single number of numbers?

stroke-dasharray="10 5 3"

The cycle becomes like this:

- dash 10,

- gap 5,

- dash 3,

- Now,it should be GAP,but with length 10

- DASH 5

- GAP 3

6 Apply stroke-dasharray on curve

<path d="M 10 40 C 10 50 40 50 40 40 Z" stroke="black" fill="none" stroke-dasharray="10 5" />

It is ok too.

>> Next lesson >>